package myJs.cps

import typings.csstype.mod.Property._
import typings.react.mod.CSSProperties

import scala.scalajs.js
import scala.scalajs.js.|

/**
 * Created by yz on 24/1/2022
 */
case class Style(
                  width: js.UndefOr[String | Int] = js.undefined,
                  minWidth: js.UndefOr[String | Int] = js.undefined,
                  color: js.UndefOr[String] = js.undefined,
                  marginTop: js.UndefOr[String | Int] = js.undefined,
                  background: js.UndefOr[String] = js.undefined,
                  display: js.UndefOr[Display] = js.undefined,
                  alignItems: js.UndefOr[AlignItems] = js.undefined,
                  marginBottom: js.UndefOr[String | Int] = js.undefined,
                  borderColor: js.UndefOr[String] = js.undefined,
                  borderWidth: js.UndefOr[Int] = js.undefined,
                  wordWrap: js.UndefOr[WordWrap] = js.undefined,
                  wordBreak: js.UndefOr[WordBreak] = js.undefined,
                  fontWeight: js.UndefOr[FontWeight] = js.undefined,
                  paddingTop: js.UndefOr[String | Int] = js.undefined,
                  paddingLeft: js.UndefOr[String | Int] = js.undefined,
                  paddingRight: js.UndefOr[String | Int] = js.undefined,
                  marginRight: js.UndefOr[String | Int] = js.undefined,
                  padding: js.UndefOr[String] = js.undefined,
                  margin: js.UndefOr[String] = js.undefined,
                  marginLeft: js.UndefOr[String | Int] = js.undefined,
                  height: js.UndefOr[String | Int] = js.undefined,
                  border: js.UndefOr[String | Int] = js.undefined,
                  boxShadow: js.UndefOr[String] = js.undefined,
                  transform: js.UndefOr[String] = js.undefined,
                  fontSize: js.UndefOr[String | Int] = js.undefined,
                  lineHeight: js.UndefOr[String | Int | Double] = js.undefined,
                  flexWrap: js.UndefOr[FlexWrap] = js.undefined,
                  justifyContent: js.UndefOr[JustifyContent] = js.undefined,
                  flex: js.UndefOr[Int | Double] = js.undefined,
                  backgroundImage: js.UndefOr[String] = js.undefined,
                  backgroundRepeat: js.UndefOr[String] = js.undefined,
                  backgroundSize: js.UndefOr[String] = js.undefined,
                  left: js.UndefOr[String | Int] = js.undefined,
                  top: js.UndefOr[Int] = js.undefined,
                  position: js.UndefOr[Position] = js.undefined,
                  borderRadius: js.UndefOr[String | Int] = js.undefined,
                  cursor: js.UndefOr[Cursor] = js.undefined,
                  paddingBottom: js.UndefOr[Int] = js.undefined,
                  overflowY: js.UndefOr[OverflowY] = js.undefined,
                  minHeight: js.UndefOr[Int] = js.undefined,
                  overflow: js.UndefOr[Overflow] = js.undefined,
                  textOverflow: js.UndefOr[TextOverflow] = js.undefined,
                  right: js.UndefOr[Int | String] = js.undefined,
                  float: js.UndefOr[Float] = js.undefined,
                  whiteSpace: js.UndefOr[WhiteSpace] = js.undefined,
                  textAlign: js.UndefOr[TextAlign] = js.undefined,
                  backgroundColor: js.UndefOr[String] = js.undefined,
                  flexDirection: js.UndefOr[FlexDirection] = js.undefined,
                  maxHeight: js.UndefOr[Int] = js.undefined,
                  maxWidth: js.UndefOr[Int] = js.undefined,

                )

object Style {

  implicit def toObject(style: Style) = {
    val css = CSSProperties()

    style.width.foreach { v => css.setWidth(v) }
    style.fontSize.foreach { v => css.setFontSize(v) }
    style.color.foreach { v => css.setColor(v) }
    style.marginTop.foreach { v => css.setMarginTop(v) }
    style.background.foreach { v => css.setBackground(v) }
    style.display.foreach { v => css.setDisplay(v) }
    style.alignItems.foreach { v => css.setAlignItems(v) }
    style.marginBottom.foreach { v => css.setMarginBottom(v) }
    style.borderColor.foreach { v => css.setBorderColor(v) }
    style.borderWidth.foreach { v => css.setBorderWidth(v) }
    style.wordWrap.foreach { v => css.setWordWrap(v) }
    style.fontWeight.foreach { v => css.setFontWeight(v) }
    style.paddingTop.foreach { v => css.setPaddingTop(v) }
    style.paddingLeft.foreach { v => css.setPaddingLeft(v) }
    style.paddingRight.foreach { v => css.setPaddingRight(v) }
    style.marginRight.foreach { v => css.setMarginRight(v) }
    style.padding.foreach { v => css.setPadding(v) }
    style.margin.foreach { v => css.setMargin(v) }
    style.marginLeft.foreach { v => css.setMarginLeft(v) }
    style.height.foreach { v => css.setHeight(v) }
    style.border.foreach { v => css.setBorder(v) }
    style.boxShadow.foreach { v => css.setBoxShadow(v) }
    style.transform.foreach { v => css.setTransform(v) }
    style.fontSize.foreach { v => css.setFontSize(v) }
    style.lineHeight.foreach { v => css.setLineHeight(v) }
    style.flexWrap.foreach { v => css.setFlexWrap(v) }
    style.justifyContent.foreach { v => css.setJustifyContent(v) }
    style.flex.foreach { v => css.setFlex(v) }
    style.backgroundImage.foreach { v => css.setBackgroundImage(v) }
    style.backgroundRepeat.foreach { v => css.setBackgroundRepeat(v) }
    style.backgroundSize.foreach { v => css.setBackgroundSize(v) }
    style.left.foreach { v => css.setLeft(v) }
    style.top.foreach { v => css.setTop(v) }
    style.position.foreach { v => css.setPosition(v) }
    style.borderRadius.foreach { v => css.setBorderRadius(v) }
    style.cursor.foreach { v => css.setCursor(v) }
    style.paddingBottom.foreach { v => css.setPaddingBottom(v) }
    style.overflowY.foreach { v => css.setOverflowY(v) }
    style.minHeight.foreach { v => css.setMinHeight(v) }
    style.overflow.foreach { v => css.setOverflow(v) }
    style.right.foreach { v => css.setRight(v) }
    style.float.foreach { v => css.setFloat(v) }
    style.whiteSpace.foreach { v => css.setWhiteSpace(v) }
    style.textAlign.foreach { v => css.setTextAlign(v) }
    style.backgroundColor.foreach { v => css.setBackgroundColor(v) }
    style.flexDirection.foreach { v => css.setFlexDirection(v) }
    style.wordBreak.foreach { v => css.setWordBreak(v) }
    style.maxHeight.foreach { v => css.setMaxHeight(v) }
    style.textOverflow.foreach { v => css.setTextOverflow(v) }
    style.maxWidth.foreach { v => css.setMaxWidth(v) }
    style.minWidth.foreach { v => css.setMinWidth(v) }
    css
  }

}
